<template>
  <div>
    <div class="search">
      <div class="selectItem selectcirclr act">
        <template>
          <div></div>
        </template>
        <Tabs class="select-tabs" @on-click="selectCircle" size="small">
          <TabPane
            v-for="(item, index) in circleList"
            :label="item.lable"
            :name="item.name"
            :key="index"
          >
            <!-- <div class="lookall">查看全部</div> -->
            <addjoincircle :allcirclelist="allcirclelist" v-if="circlrType == '1'" @upquanziList="upquanziList" ></addjoincircle>
            <myjoincircleVue v-if="circlrType == '2'" :mycirclelist="mycirclelist"  ></myjoincircleVue>
          </TabPane>
        </Tabs>
      </div>
    </div>
  </div>
</template>

<script>
import addjoincircle from "./joincircleapage/addjoincircle.vue";
import myjoincircleVue from "./joincircleapage/myjoincircleb.vue";
import { allquanzi, ourquanzi, clickFollowFriend } from "@/api/community";
export default {
  components: {
    addjoincircle,
    myjoincircleVue,
  },
  data() {
    return {
      //分类的·数据
      classData: [],
      activeData: [],
      myjoinlist: [],
      // 右边的圈子（全部）
      allcirclelist: [],
      // 右边圈子（我的）
      mycirclelist: [],
      list: [],
      selectType: "",
      circlrType: "1",
      selectactType: "1",
      value: "",
      addrecommendType: "",
      circleList: [
        {
          lable: "全部",
          name: "1",
        },
        {
          lable: "我加入的",
          name: "2",
        },
      ],
      friend: [
        { lable: "全部", name: "1" },
        { lable: "我加入的", name: "2" },
      ],
      list: [],
    };
  },
  mounted() {
    this.getcircleall();
    this.getmycircle();
  },
  methods: {
    upquanziList() {
      this.getcircleall();
    },
    // 获取右边的圈子
    selectCircle(v) {
      console.log(this.circlrType, "圈子");
      this.circlrType = this.circleList[v - 1].name;
      if(v == 2) {
        this.getmycircle()
      }
    },
    // 获取圈子右边列表（全部圈子信息）
    getcircleall() {
      allquanzi({
        mid: JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize: 10000,
      }).then((res) => {
        this.allcirclelist = res.circledata;
        console.log(this.allcirclelist, "allquanzi");
      });
    },
    // 获取圈子右边列表（我的圈子信息）
    getmycircle() {
      ourquanzi({
        mid: JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize: 10000,
      }).then((res) => {
        this.mycirclelist = res.circledata
        console.log(this.allcirclelist, "我参加的圈子");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 41px;
  background: #ffffff;
  border-radius: 6px;
  // border: 1px solid red;
  // display: flex;
  // align-items: flex-end;
  // justify-content: space-between;
  .searchTabs {
    width: 300px;
    height: 200px;
    background-color: black;
  }
}
</style>
